<template>
    <div class="container" v-if="showFlag">
        <el-alert
                title="点击名字下方以激活充值框"
                effect="dark"
                type="info">
        </el-alert>
        <Layout class="layout">
            <Sider class="side-bar" :style="{height: 'calc(100vh - 35px)', background: '#fff', overflow: 'auto'}"
                   ref="side" :collapsed-width="78">
                <Menu active-name="1-2" theme="light" width="auto" @on-select="onSelect">
                    <div class="user-icon">
                        <div class="user-img">
                            <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                        </div>
                        <p style="font-size: 18px">{{this.$store.getters.getUser.username}}</p>
                        <p style="color: #6f42c1"
                           @click="showInchage">
                            {{this.$store.getters.getUser.balance}}$
                        </p>
                        <!--充值 -->
                        <div class="inchage">
                            <el-dialog title="充值" width="400px" center :visible.sync="showDialog">
                                <el-form :model="inchageForm" status-icon class="demo-ruleForm" label-width="80px"
                                         label-position="right">
                                    <el-form-item label="金额" prop="addressName">
                                        <el-input prefix-icon="el-icon-s-promotion"
                                                  placeholder="请输入充值金额"
                                                  v-model="inchageForm.balance"
                                                  clearable></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-tooltip class="item" effect="dark" content="微信支付" placement="bottom-start">
                                            <i><img src="../assets/images/inchageIcon/wechat.png" alt="微信支付"></i>
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="支付宝支付" placement="bottom-start">
                                            <i><img src="../assets/images/inchageIcon/alipay.png" alt="支付宝支付"></i>
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="zmallpay"
                                                    placement="bottom-start">
                                            <i><img src="../assets/images/inchageIcon/zmallpay.png" alt="zmallpay"></i>
                                        </el-tooltip>
                                    </el-form-item>
                                    <el-button type="primary" @click="userCharge">确定</el-button>
                                </el-form>
                            </el-dialog>
                        </div>
                        <!--充值END -->
                    </div>
                    <Submenu name="1">
                        <template slot="title">
                            <Icon type="location"></Icon>
                            <span>收货地址</span>
                        </template>
                        <!--                        <router-link to="myAddress">-->
                        <MenuItem name="myAddress">我的收货地址</MenuItem>
                        <!--                        </router-link>-->
                        <MenuItem name="addAddress">添加收货地址</MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="clipboard"></Icon>
                            <span>购物订单</span>
                        </template>
                        <MenuItem name="myOrder">我的订单</MenuItem>
                        <MenuItem name="myOrderUnpay">待支付订单</MenuItem>
                        <MenuItem name="myOrderAccount">待收货订单</MenuItem>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="clipboard"></Icon>
                            <span>优惠券</span>
                        </template>
                        <MenuItem name="myTicket">我的优惠券</MenuItem>
                    </Submenu>
                </Menu>
            </Sider>
            <Layout class="layout">
                <Header :style="{background: '#fff'}">
                    <h2>{{activeTitle}}</h2>
                </Header>
                <Content class="content">
                    <transition mode="out-in">
                        <router-view></router-view>
                    </transition>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>

<script>

    import {mapActions, mapGetters} from "vuex";

    export default {

        name: "PersonalCenter",
        data() {
            return {
                showDialog: false,
                activeTitle: '我的订单',
                bar: {
                    'myAddress': '我的收货地址',
                    'addAddress': '添加收货地址',
                    'myOrder': '我的订单',
                    'myOrderUnpay': '待支付订单',
                    'myOrderAccount': '待收货订单',
                },
                inchageForm: {
                    balance: ''
                },
                showFlag:false,//加载页面
            };
        },
        methods: {
            ...mapActions(["setUser"]),
            onSelect(name) {
                this.activeTitle = this.bar[name];
                this.$router.push(`/personalcenter/${name}`);
            },
            //展示充值弹窗
            showInchage() {
                this.showDialog = true;
            },
            //用户充值
            userCharge() {
                let params = new URLSearchParams();
                params.append("userID", this.$store.getters.getUser.id);
                params.append("money", this.inchageForm.balance);
                this.$axios
                    .post("/item/usercharge", params)
                    .then(res => {
                        if (res.data.result == 1) {
                            this.showDialog = false;
                            this.inchageForm.balance = null;
                            this.getUserInfo();
                            this.notifySucceed("充值成功");
                        } else {
                            this.notifyError("充值失败，请及时联系管理员");
                        }
                    })
                    .catch(err => {
                        return Promise.reject(err);

                    });
            },
            getUserInfo() {
                this.$axios.get("/menber/getuserinfo", {
                    params: {
                        userId: this.$store.getters.getUser.id,
                    }
                })
                    .then(res => {
                        this.setUser(res.data.result);
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    })
            },
        },
        computed: {
            ...mapGetters(["getUser"])
        },
        created() {
            this.showFlag = true
        }
    }
</script>

<style scoped>
    .side-bar a {
        color: #232323;
    }

    .user-icon {
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .user-icon span {
        font-size: 96px;
    }

    .user-img {
        margin-bottom: 15px;
        width: 96px;
        height: 96px;
        border-radius: 48px;
        overflow: hidden;
    }

    .user-img img {
        width: 100%;
    }

    .content {
        margin: 15px;
        background-color: #fff;
        padding: 15px;
    }

    .layout-footer-center {
        padding: 0px 15px;
        padding-bottom: 15px;
        text-align: center;
    }

    .inchage i {
        margin: 20px;
    }

    .inchage .el-button {
        margin: 0 0 0 150px;
    }

</style>
